<template>
    <div class="cur-list">
        <router-link :to="{ name: 'positionDetail', params: { id: position.id }}">
            {{ position.position }}
        </router-link>
            <a><i class="cur-list-icon el-icon-delete" @click="deletePosting"></i></a>
        <a v-if="type == 'current'">
            <i class="cur-list-icon el-icon-share"
               @click="sharingVisible = true"></i>
        </a>
        <router-link :to="{ name: 'updatePosition', params: { id: position.id }}">
            <i class="cur-list-icon el-icon-edit"></i>
        </router-link>
        <div class="cur-list-position-underline"></div>
        <el-dialog title="Sharing" v-model="sharingVisible">
            <span class="cur-list-sharing-title">Sharing position of "{{ position.position }}" by following URL:</span>
            <div  class="cur-list-sharing-content">
                <input :id="sharingId" v-model="sharingUrl" class="cur-list-sharing-content-input">
                <el-tooltip class="item" effect="dark" content="Click to Copy!" placement="bottom">
                    <i class="el-icon-share cur-list-sharing-content-icon" :data-clipboard-target="clipboardId"></i>
                </el-tooltip>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import { Loading } from 'element-ui';
    export default {
        name: 'position-item',
        props: ['position', 'type'],
        data () {
            return {
                sharingVisible: false
            }
        },
        computed: {
            sharingUrl () {
                return `Http://${window.location.hostname}/m/posting/${this.position.id}`
            },
            sharingId () {
                return `cur-list-sharing-${this.position.id}`
            },
            clipboardId () {
                return `#cur-list-sharing-${this.position.id}`
            }
        },
        methods: {
            deletePosting () {
                this.$confirm('You are going to delete the posting, continue?', 'Warning', {
                    confirmButtonText: 'Confirm',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(() => {
                    this.loading = Loading.service({ fullscreen: true, text: 'Deleting' })
                    this.deletePosition(this, (data) => {
                        if (data === 'success') {
                            this.loading.close()
                            this.$emit('reloadList')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="sass" scoped>
    #cur-list {
        &-new-post {
            float: right;
        }

        a {
            color: black;
            font-size: 1.3em;
        }
    }

    .cur-list {
        font-weight: 100;

        &-icon {
            float: right;
            width: 2em;
            font-size: 1em;
            line-height: 2em;
        }
        &-icon:hover {
            cursor: pointer;
            color: #2CA2FC;
        }
        &-position {
            position: relative;

            &-underline {
                border-bottom: 1px solid #D3E0E9;
                width: 90%;
                margin-left: 5%;
                margin-bottom: 1.2em;
                margin-top: 8px;
                opacity: .5;
            }
        }
        &-sharing {
            &-title {
                margin-bottom: 1em;
                display: block;
            }
            &-content {
                width: 80%;
                display: block;
                margin: 0 auto;

                &-input {
                    display: inline-block;
                    width: 60%;
                    line-height: 1.6;
                    border-radius: 4px;
                    border: 1px #d5d5d5 solid;
                    padding: 5px;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                &-icon {
                    padding: 5px 9px;
                    line-height: 1.6;
                    margin-left: -5px;
                    margin-bottom: 3px;
                    vertical-align: middle;
                    cursor: pointer;
                    background-color: #eee;
                    background-image: linear-gradient(#fcfcfc,#eee);
                    border: 1px solid #d5d5d5;
                    border-radius: 3px;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }

                &-icon:hover {
                    text-decoration: none;
                    background-color: #ddd;
                    background-image: linear-gradient(#eee,#ddd);
                    border-color: #ccc;
                }
            }
        }
    }
</style>
